import React, { useCallback, useState } from 'react';
import { Tabs } from 'antd';

import NormalComponent from './normal';
import MemoComponent from './memo';
import FuncComponent from './func';
import Combination from './combination';
import DataCache from './dataCache';
import DataCacheUseMemo from './dataCacheUseMemo';

const { TabPane } = Tabs;

function App() {

  const [active, setActive] = useState('1');

  const onChange = useCallback((e) => {
    setActive(e)
  }, [setActive]);

  return (
    <Tabs onChange={onChange}>
      <TabPane tab="常规写法" key="1">
        {active === '1' && <NormalComponent />}
      </TabPane>
      <TabPane tab="memo使用" key="2">
        {active === '2' && <MemoComponent />}
      </TabPane>
      <TabPane tab="传递函数" key="3">
        {active === '3' && <FuncComponent />}
      </TabPane>
      <TabPane tab="组合写法" key="4">
        {active === '4' && <Combination />}
      </TabPane>
      <TabPane tab="函数多次执行" key="5">
        {active === '5' && <DataCache />}
      </TabPane>
      <TabPane tab="useMemo正确打开方式" key="6">
        {active === '6' && <DataCacheUseMemo />}
      </TabPane>
    </Tabs>
  )
}

export default App;
